<!DOCTYPE HTML>
<html>
<head>
<title>Products</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Kaisersosa Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- header -->
	<div class="container">
		<div class="header">
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" class="img-responsive" alt="" /></a>
			</div>
			<div class="header-left">
				<div class="head-nav">
						<span class="menu"> </span>
					<ul class="cl-effect-1">
						<li><a href="index.html">Home</a></li>
						<li><a href="about.html">About Us</a></li>
						<li><a href="services.html">Services</a></li>
						<li class="active"><a href="products.html">Products</a></li>
						<li><a href="blog.html">Blog</a></li>
						<li><a href="404.html">Downloads</a></li>
						<li><a href="contact.html">Contact</a></li>
							<div class="clearfix"></div>
					</ul>
				</div>
				<!-- script-for-nav -->
						<script>
							$( "span.menu" ).click(function() {
							  $( ".head-nav ul" ).slideToggle(300, function() {
								// Animation complete.
							  });
							});
						</script>
					<!-- script-for-nav -->
				<div class="search2">
					<form>
						<input type="text" value="Search here.." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search here..';}">
						<input type="submit" value="">
					</form>
				</div>
					<div class="clearfix"> </div>
			</div>
				<div class="clearfix"> </div>
		</div>
	
<!-- header -->	
				<div class="product">
					
				<ul id="filters">
						<li class="active"><span class="filter" data-filter="app card icon logo  web">ALL</span></li>
						<li><span class="filter" data-filter="app">CATEGORY1</span></li>
						<li><span class="filter" data-filter="card">CATEGORY2 </span></li>
						<li><span class="filter" data-filter="icon">CATEGORY3</span></li>
						<li><span class="filter" data-filter="logo">CATEGORY4</span></li>
					</ul>
					<div id="portfoliolist">
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.html" class="b-link-stripe b-animate-go  thickbox play-icon">
						  <img class="img-responsive " src="images/index-1_img-2.jpg" alt="" />
						   
						     <ul class="social-ic">
								<li class="down"><span> </span></li>
							</ul>
							</a>							
						</div>
					</div>				
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.html" class="b-link-stripe b-animate-go  thickbox play-icon ">
						    <img class="img-responsive" src="images/index-1_img-3.jpg" alt=""  />
						    <ul class="social-ic">
								<li class="down"><span> </span></li>
							</ul>
							</a>
		                </div>
					</div>		
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.html" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/index-1_img-4.jpg"  alt="" />
						      <ul class="social-ic">
								<li class="down"><span> </span></li>
							</ul>
							</a>
		                </div>
					</div>				
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.html" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/index-1_img-5.jpg" alt=""  />
						     <ul class="social-ic">
								<li class="down"><span> </span></li>
							</ul>
							</a>
		                </div>
					</div>	
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.html" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/index-1_img-1.jpg" alt=""  />
						     <ul class="social-ic">
								<li class="down"><span> </span></li>
							</ul>
							</a>
		                </div>
					</div>			
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.html" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/p3.jpg" alt=""  />
						    <ul class="social-ic">
								<li class="down"><span> </span></li>
							</ul>
							</a>
		               </div>
					</div>
					<div class="portfolio logo mix_all " data-cat="logo" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.html" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/p1.jpg" alt=""  />
						     <ul class="social-ic">
								<li class="down"><span> </span></li>
							</ul>
							</a>
		               </div>
					</div>
					<div class="portfolio logo mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.html" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/p2.jpg" alt=""  />
						     <ul class="social-ic">
								<li class="down"><span> </span></li>
							</ul>
							</a>
		               </div>
					</div>
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper port">		
						<div class="dis">
							<a href="single.html" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/index-1_img-3.jpg" alt=""  />
						     
						     <ul class="social-ic">
								<li class="down"><span> </span></li>
							</ul>
							</a>
						</div>
		               </div>
					</div>
					
					<div class="clearfix"> </div>
					</div>	
			<!-- Script for gallery Here -->
				<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
					<script type="text/javascript">
					$(function () {
						
						var filterList = {
						
							init: function () {
							
								// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});				
							
							},
							
							hoverEffect: function () {
							
								// Simple parallax effect
								$('#portfoliolist .portfolio').hover(
									function () {
										$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
										$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
									},
									function () {
										$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
										$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
									}		
								);				
							
							}
				
						};
						
						// Run the show!
						filterList.init();
						
						
					});	
					</script>
			<!-- Gallery Script Ends -->

				</div>


</div>	
	<!-- footer -->
		<div class="footer">
			<div class="container">
			<div class="footer-top">
				<div class="foot-left">
					<h5><a href="#">KaiserSosa</a></h5>
				</div>
				<div class="foot-right">
					<ul>
						<li><a href="#"><i class="fb"></i></a></li>
						<li><a href="#"><i class="twt"></i></a></li>
						<li><a href="#"><i class="in"></i></a></li>
						<li><a href="#"><i class="rss"></i></a></li>
						<div class="clearfix"> </div>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<i class="line"> </i>
			<div class="footer-bottom">
				<div class="foot-left">
					<div class="foot-nav">
					<ul>
						<li><a href="index.html">Home</a></li> |
						<li><a href="about.html">About Us</a></li> |
						<li><a href="services.html">Services</a></li> |
						<li><a href="products.html">Products</a></li> |
						<li><a href="blog.html">Blog</a></li> |
						<li><a href="404.html">Downloads</a></li> |
						<li class="active"><a href="contact.html">Contact</a></li>
							<div class="clearfix"></div>
					</ul>
					</div>					
				</div>
				<div class="foot-right">
					<p>Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- footer -->
</html>
</body>